<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		.headSearch {
			padding: 0 0 0 0.75rem;
		}

		.headSearch .searchIco {
			position: absolute;
			left: 0.75rem;
			top: 50%;
			width: 1rem;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		.headSearch .searchInput {
			background: #f5f5f5;
			padding: 0 0.5rem 0 2.25rem;
			height: 1.6rem;
			border-radius: 0.8rem;
			font-size: 0.7rem;
			color: #333;
		}

		.cancel {
			padding: 0 0.75rem;
			font-size: 0.8rem;
		}
	</style>
</head>

<body>
	<div id="topBox">
		<div class="aui-border-b" id="header">
			<div class="headSearch aui-flex-col aui-flex-middle">
				<div class="flex-auto relative">
					<form action="" id="searchForm">
						<div class="searchIco"><img src="../../image/common/03.png" alt=""></div>
						<input type="search" class="searchInput" placeholder="大家都在搜" id="searchInput" onkeyup="delBtnCheck();">
					</form>
					<div class="inputDel aui-hide" tapmode onClick="inputDel();"></div>
				</div>
				<div class="cancel" tapmode onClick="api.closeWin();">取消</div>
			</div>
		</div>
		<div class="sortBox">
			<div class="sortList aui-flex-col aui-flex-middle">
				<div class="active" tapmode onClick="changeSort(0);">综合</div>
				<div tapmode onClick="changeSort(1);">收藏量</div>
				<div tapmode onClick="changeSort(2);">评论量</div>
				<div tapmode onClick="changeSort(3);">点赞量</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	var headerH;
	apiready = function() {
		api.parseTapmode();
		var header = $api.byId('topBox');
		$api.fixStatusBar(header);
		headerH = $api.offset($api.byId('topBox')).h;
		api.openFrame({
			name: 'search_frm',
			url: 'search_frm.html',
			rect: {
				x: 0,
				y: headerH,
				w: 'auto',
				h: 'auto'
			},
			bgColor: '#f5f5f5',
			useWKWebView: true,
			bounces: true,
			pageParam: api.pageParam
		});
		$$('#searchInput').focus();
		$$('#searchInput').blur();
	};
	//点击标签后 输入框里显示相应标签
	// function setVal(txt){
	// 	$$('#searchInput').val(txt);
	// 	delBtnCheck();
	// }
	//检测输入框是否显示删除按钮
	function delBtnCheck() {
		if ($$('#searchInput').val()) {
			$$('.inputDel').removeClass('aui-hide');
		} else {
			$$('.inputDel').addClass('aui-hide');
		}
	}
	//点击清空输入框
	function inputDel() {
		$$('.inputDel').addClass('aui-hide');
		$$('#searchInput').focus();
		$$('#searchInput').val('');
	}
	//搜索
	$$('#searchForm').submit(function() {
		$$('#searchInput').blur();
		var s = $$('#searchInput').val();
		if (!s) {
			return;
		}
		console.log(s)
		api.execScript({
			frameName: 'search_frm',
			script: 'searchFn("' + s + '");'
		});
		return false;
	});
	//点击排序按钮
	function changeSort(ind) {
		$$('.sortList > div').removeClass('active').eq(ind).addClass('active');
		api.execScript({
			frameName: 'search_frm',
			script: 'getData("' + ind + '");'
		});
	}
</script>

</html>
